<div>
  <div class="form-group" :class="{'has-error': !kbFormItem.valid}">
    <label
      :class="{ 'text-muted': field.disabled }"
      class="control-label col-md-3"
      >{{ field.fieldName }}</label
    >
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-10 kb-files-picker">
          <div class="file-list">
            <ul v-if="files.length">
              <li v-for="(file, index) in files" :key="index">
                <span>{{ file.url }}</span>
                <a
                  v-if="!field.disabled"
                  href="javascript:;"
                  @click="removeFile(file)"
                >
                  <i class="fa fa-remove"></i>
                </a>
              </li>
            </ul>
          </div>
          <span v-if="!field.disabled">
            <a @click="selectFile" class="btn blue kb-file-grid-causer"
              >{{ Kooboo.text.common.selectFile }}</a
            >
          </span>
        </div>
      </div>
      <span v-if="field.tooltip" class="help-block">{{ field.tooltip }}</span>
      <span v-if="!kbFormItem.valid" class="help-block kb-text-error"
        >{{ kbFormItem.msg }}</span
      >
    </div>
  </div>
  <kb-file-dialog
    :data="fileDialogData"
    :multiple="field.isMultipleValue"
  ></kb-file-dialog>
</div>
